<template lang="pug">
.breadcrumb-wrap
  el-breadcrumb(separator="/")
    el-breadcrumb-item(:to="{ name: 'index' }") 首页
    el-breadcrumb-item(v-for="(item, index) in state.routeList" :key="index" :to="{ path: item.path }") {{item.meta.title}}
</template>

<script setup>
import { reactive, getCurrentInstance, watch } from 'vue'

const { proxy } = getCurrentInstance()

const state = reactive({
  routeList: []
})

getBreadcrumb()
watch(() => [proxy.$route.fullPath], ([newRoute, oldRoute]) => {
  getBreadcrumb()
})

// 获取路由面包屑
function getBreadcrumb () {
  const route = proxy.$route
  if (route.name === 'index') {
    state.routeList = reactive([])
  } else {
    state.routeList = reactive(proxy.$route.matched)
  }
}
</script>

<style>
  .breadcrumb-wrap {
    padding: 10px 20px 0;
  }
</style>
